fix(native): resolve declarations in cascade order once an element's variables are set - #474

Problem

A declaration whose value reads a var() resolves after every other declaration of its element, through a placeholder left at its key. Three defects on main follow from that:

1. It resolves against the wrong target. Its closure captured applyDeclarations's shared target binding, so it checked its placeholder against whatever nested target the last declaration ended on, missed it, and left the placeholder in the style. color: var(--c); box-shadow: 1px 1px blue renders color: { color: true }, text-shadow does the same, -webkit-line-clamp: var(--n) beside a deferred colour renders numberOfLines: { numberOfLines: true }, and rotate: 45deg beside a box-shadow leaves { rotateZ: true } in the transform and writes the rotation into the shadow.
2. A deferred shorthand overwrites a later declaration. border: var(--b); border-color: blue paints the variable's colour, within a rule and across rules. border-inline-width: var(--w) does the same over a later border-inline-start-width, an earlier rule's text-shadow: var(--s) replaces a later rule's text-shadow, and animation: var(--a) replaces a later animation-duration.
3. An individual transform property drops a deferred transform. It replaces the placeholder with an empty list, so .a { transform: var(--t) } .b { rotate: 45deg } renders the rotation alone, where browsers apply both.

Solution

• Every rule's variables are assigned before any declaration resolves, since a var() substitutes the element's computed custom property (css-variables-1 §3). Then every declaration resolves in cascade order, so a later declaration overwrites an earlier one as browsers apply them.
• The placeholder is left only for an individual transform property, which composes into the transform list once every rule is walked. Its closure keeps its own declaration's target.
• A runtime value that resolves to nothing still removes the property, as it does on main.

Tests

• src/__tests__/native/deferred-declarations.test.tsx:
  • each placeholder shape, and a shadow that omits its colour beside a colour;
  • each shorthand before and after its longhand, in one rule and across rules;
  • a deferred transform beside an individual transform property;
  • an individual transform property before and after a transform, and beside a box-shadow;
  • a var() with no value, and a written value the runtime cannot read, over an earlier rule's value.
• src/__tests__/native/animations.test.tsx: a written animation-duration after a variable animation, with the variable inlined and kept.
• On main, 14 of these 22 cases fail; the 8 that pass there are the orders main already gets right, kept so they stay right.
• Each of 6 mutations of the walk fails its own cases.
• Every expectation is what Chromium 153, Firefox 155 and WebKit 26.6 compute for the same CSS, apart from the platform function, which this library defines.

Verification

On Ubuntu with the workflow's steps - build, lint, typecheck, yarn test, node --test node/__tests__/*.mjs, both library builds, the web export, the unstaged-changes checks and commitlint - everything passes.

Device evidence, before and after: #474 (comment)

Merge order

#393 and #501 build on this, so this lands first.

It shares lines with #389, #391, #411 and #488 (native/styles/calculate-props.ts); whichever lands second rebases. With #391, a declaration a var() leaves invalid at computed-value time resolves to unset, so the second of the two to land keeps that and drops this removal for a runtime value that resolves to nothing, which leaves one the runtime cannot read ignored.

Base

Branched off main (a5002c5).